<template>
	<view :data-theme="theme" style="display: flex;flex-direction: column; height: 100%;">
		<scroll-view scroll-y="true" style="flex: 1; min-height: 10px;">
			<!-- <view class="card">
				<view style="display: flex; justify-content: space-between;
    align-items: center;font-size: 32rpx;font-weight: bold;	padding: 20rpx;">
					<span>店铺名称</span>
				</view>
			</view> -->
			<u--form :model="form" ref="uForm" style="width: 100%;">
				<view class="card">
					<view style="display: flex; justify-content: space-between;
					align-items: center;font-size: 32rpx;font-weight: bold;	padding: 20rpx;">
						<span>店铺名称</span>
						<!-- <u-form-item prop="name" labelWidth="60"> -->
						<span>{{form.name}}</span>
						<!-- </u-form-item> -->
					</view>
				</view>
				<u-form-item>
					<view class="card" style="width: 100%;">
						<span>店铺logo</span>
						<view class="auto" style="margin: 0 auto;text-align: center;padding: 20rpx;">
							<view v-if="merTnfoForm.rectangleLogo">
								<u-upload style="flex: none;" :fileList="fileList1" @afterRead="afterRead"
									@delete="deletePic" name="1" :maxCount="1">
								</u-upload>
							</view>
							<view v-else>
								<u-upload style="flex: none;" :fileList="fileList1" @afterRead="afterRead"
									@delete="deletePic" name="1" :maxCount="1">
								</u-upload>
							</view>

						</view>
					</view>
				</u-form-item>
				<view class="card">
					<u-form-item>
						<view class="card">
							<span>H5商户背景图</span>
							<view class="auto" style="margin: 0 auto;text-align: center;padding: 20rpx;">
								<u-upload style="flex: none;" :fileList="fileList2" @afterRead="afterRead"
									@delete="deletePic" name="2" :maxCount="1">
								</u-upload>
							</view>
						</view>
					</u-form-item>
					<u-form-item>
						<view class="card">
							<span>H5商户街背景图</span>
							<view class="auto" style="margin: 0 auto;text-align: center;padding: 20rpx;">
								<u-upload style="flex: none;" :fileList="fileList3" @afterRead="afterRead"
									@delete="deletePic" name="3" :maxCount="1">
								</u-upload>
							</view>
						</view>
					</u-form-item>
					<u-form-item>
						<view class="card">
							<span>H5商户封面图</span>
							<view class="auto" style="margin: 0 auto;text-align: center;padding: 20rpx;">
								<u-upload style="flex: none;" :fileList="fileList4" @afterRead="afterRead"
									@delete="deletePic" name="4" :maxCount="1">
								</u-upload>
							</view>
						</view>
					</u-form-item>
				</view>
			</u--form>
		</scroll-view>

		<!-- 底部 -->
		<view style="position: sticky;bottom: 0px;width: 100%;padding: 10px;background-color: #fff;z-index: 999;">
			<!-- <u-row>
				<u-col span="12">
					<u-button style="font-weight: bold;border-radius: 10px;" :color="bgColor" size="large"
						type="primary" text="提交审核" @click="handlerSubmit"></u-button>
				</u-col>
			</u-row> -->
			<button class="bg_color" style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;"
				:color="bgColor" @click="handlerSubmit">提交审核</button>
		</view>
	</view>
</template>

<script>
	import {
		merchantConfigInfoApi,
		merchantUpdateApi
	} from '@/api/merchant.js';
	import {
		getBaseInfoApi
	} from '@/api/merchant.js'
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {

		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				fileList1: [], //logo封面图
				imageList1: [], //
				fileList2: [], // 商户背景图
				imageList2: [], //
				fileList3: [], // 商户街背景图
				imageList3: [], //
				fileList4: [], //商户封面图图
				imageList4: [], //
				merTnfoForm: {}, //商户信息
				form: {
					name: '',
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}]
				},
				baseData: {},
			};
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.getList();
			this.getBaseInfo();
		},
		methods: {
			getBaseInfo() {
				getBaseInfoApi().then((res) => {
					this.form.name = res.data.name;
				})
			},
			// 商户信息
			getList() {
				merchantConfigInfoApi().then((res) => {
					this.merTnfoForm = res.data;
					this.fileList1.push(res.data.rectangleLogo);
					this.fileList2.push(res.data.backImage);
					this.fileList3.push(res.data.streetBackImage);
					this.fileList4.push(res.data.coverImage);
				})
			},

			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					if (result == null) {
						uni.showToast({
							title: "上传失败",
							icon: "none",
						})
						this.deletePic(event.index, 1);
						break;
					}
					let newStatus = {
						status: 'success',
						message: '上传成功',
						url: result,
					}
					this.updateForm.invoiceFile = result;
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, newStatus))
					fileListLen++
				}
			},
			uploadFilePromise(filePath) {
				return this.$util.uploadFilePromise(filePath, {
					url: 'upload/image',
					name: "multipart", //固定 multipart
					model: "invoice", //模块 用户user,商品product,微信wechat,news文章,发票invoice,
					pid: 9, //分类ID 0编辑器,1商品图片,2拼团图片,3砍价图片,4秒杀图片,5文章图片,6组合数据图,7前台用户,8微信系列,9发票图片
					count: 1
				});
			},
			//提交确认
			handlerSubmit() {
				this.merTnfoForm.name = this.form.name;
				merchantUpdateApi(this.merTnfoForm).then((res) => {
					console.log(res)
					wx.showToast({
						title: '操作成功',
						icon: 'success',
						duration: 2000,
					});
				});

			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.card {
		margin: 20rpx 20rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 10px;
	}

	.card>span {
		font-size: 32rpx;
		font-weight: bold;
		padding: 20rpx;
		display: block;
	}

	.background-tip {
		color: #808080;
		padding: 20rpx;
	}
</style>